<template>
  <view v-if="shenheStatus == 0" class="pages">
    <template v-if="goods">
      <goodsSwiper :goodsInfo="goods"></goodsSwiper>

      <view class="content">
        <view class="m-box mt">
          <view class="price"
            >￥<text>{{ goods.price | priceBeforeZero }}</text
            >{{ goods.price | priceAfterZero }}</view
          >

          <view class="tag">
            <view>预计赚￥{{ goods.rebate }}</view>
          </view>

          <view class="name">{{ goods.name }}</view>

          <view class="num">
            <view class="item"
              >带货销量<text>{{ goods.sales }}</text></view
            >
            <view class="item"
              >剩余库存<text>{{ goods.num }}</text></view
            >
          </view>
        </view>

        <view class="m-content mt">
          <view class="m-content-tit">
            <view class="let">分享方式</view>
            <view class="rig">
              <i class="iconfont icon-prompt"></i>
              <text>都可产生分销数据</text>
            </view>
          </view>

          <view class="m-content-bd">
            <view class="ts">
              <image
                v-if="asyncImgs"
                :src="asyncImgs.video_shop.share"
                mode="widthFix"
              ></image>
            </view>

            <view class="line"></view>

            <view class="m-tit">规则</view>

            <image
              class="img"
              v-if="asyncImgs"
              :src="asyncImgs.video_shop.video_icon0"
              mode="widthFix"
            ></image>
          </view>
        </view>

        <view class="mt">
          <goodsRichText :goodsInfo="goods"></goodsRichText>
        </view>
      </view>

      <view class="footer safe-area-inset-bottom">
        <view class="btn">
          <view
            class="item"
            v-if="is_distributor_audit_reject"
            @click="$utils.toUrl('/user/add-share/index')"
            >已拒绝</view
          >
          <view class="item" v-if="is_distributor_wait_audit">审核中</view>
          <view
            class="item"
            v-if="not_is_distributor"
            @click="$utils.toUrl('/user/add-share/index')"
          >
            "申请成为分销商"
          </view>

          <template
            v-if="
              !is_distributor_audit_reject &&
              !is_distributor_wait_audit &&
              !not_is_distributor
            "
          >
            <view class="item item1" @click="share">分享赚佣金</view>
            <view class="item" v-if="finderUserName" @click="goVideo"
              >进入视频号</view
            >
          </template>
        </view>
      </view>
    </template>

    <goodsShare
      v-if="sharer_id"
      :product_id="product_id"
      :sharer_id="sharer_id"
      @closeShare="sharer_id = ''"
    ></goodsShare>

    <popShare
      ref="share"
      :sharerList="sharer_list"
      title="请选择分享员"
      @callback="(item) => getIsUse(item)"
      @bind="addBind"
      :hasAdd="!!allow_add"
    ></popShare>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import goodsSwiper from "./components/goodsSwiper";
import goodsRichText from "./components/goodsRichText";
import goodsShare from "./components/goodsShare";
import popShare from "../components/pop-share";
import { sharerStatus } from "@/api/videoShop";

export default {
  components: {
    Shenhe,
    goodsSwiper,
    goodsRichText,
    goodsShare,
    popShare
  },

  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    }
  },

  data() {
    return {
      product_id: "",
      id: "",
      goods: null,

      is_distributor_audit_reject: 0,
      is_distributor_wait_audit: 0,
      not_is_video_sharer: 0,
      not_is_distributor: 0,
      finderUserName: "",

      sharer_list: [],
      sharer_id: "",
      allow_add: false
    };
  },

  async onLoad(opi) {
    try {
      let { id, product_id } = opi;
      this.id = id;
      this.product_id = product_id;
    } catch (error) {
      this.$utils.toast(error);
    }
  },

  async onShow() {
    this.init();
  },

  methods: {
    async init() {
      this.sharerStatus();
      const res = await this.$allrequest.goods.goodsDetails({
        id: this.id
      });

      if (!res.code) {
        this.goods = res.data;
      }
    },

    async sharerStatus() {
      const res = await sharerStatus({
        product_id: this.product_id
      });

      // not_is_distributor 1 申请分销商
      if (!res.code) {
        let {
          is_distributor_audit_reject,
          is_distributor_wait_audit,
          not_is_video_sharer,
          not_is_distributor,
          sharer_list,
          finderUserName,
          allow_add
        } = res.data;

        this.is_distributor_audit_reject = is_distributor_audit_reject;
        this.is_distributor_wait_audit = is_distributor_wait_audit;
        this.not_is_video_sharer = not_is_video_sharer;
        this.not_is_distributor = not_is_distributor;
        this.sharer_list = sharer_list;
        this.finderUserName = finderUserName;
        this.allow_add = allow_add;
      }
    },

    getIsUse(item) {
      if (item.is_use) {
        this.sharer_id = item.id;
      } else {
        this.$utils.showModal(
          "提示",
          "微信号未绑定！",
          true,
          () => {
            this.$utils.toUrl(
              `/videoNumber/bind/index?sharer_id=${item.id}&wx_username=${item.username}`
            );
          },
          () => {},
          "去绑定"
        );
      }

      let share = this.$refs.share;
      share.showPopup = false;
      share.params = {
        id: "",
        is_use: 0
      };
    },

    share() {
      if (this.not_is_video_sharer) {
        this.applyDis();
      } else {
        if (this.sharer_list.length == 1) {
          let item = this.sharer_list[0];
          this.getIsUse(item);
          return;
        }

        this.$refs.share.showPopup = true;
      }
    },

    addBind() {
      this.$utils.toUrl(
        `/videoNumber/bind/index?product_id=${this.product_id}`
      );
    },

    applyDis() {
      this.$utils.showModal(
        "绑定分享员",
        "您有没有绑定小店，绑定小店才可以分享商品！",
        true,
        () => {
          this.addBind();
        },
        () => {},
        "立即绑定"
      );
    },

    goVideo() {
      // #ifdef MP-WEIXIN
      wx.openChannelsUserProfile({
        finderUserName: this.finderUserName
      });
      // #endif
      // #ifndef MP-WEIXIN
      this.$utils.toast("当前环境不支持此次操作");
      // #endif
    }
  }
};
</script>

<style lang="scss" scoped>
.pages {
  padding-bottom: 200rpx;
  min-height: 100vh;
  background: #f2f2f2;
  box-sizing: border-box;
}

.content {
  padding: 0 24rpx;
}

.m-box {
  padding: 24rpx;
  border-radius: 20rpx;
  background: #fff;
}

.mt {
  margin-top: 24rpx;
}

.img {
  display: block;
  width: 100%;
}

.m-tit {
  padding-bottom: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
}

.price {
  color: #f8260a;
  font-size: 32rpx;
  font-weight: bold;

  text {
    font-size: 48rpx;
  }
}

.tag {
  display: flex;
  flex-wrap: wrap;
  padding: 16rpx 0 24rpx;

  view {
    margin: 0 10rpx 10rpx 0;
    padding: 2rpx 8rpx;
    background: linear-gradient(92deg, #ffe4e3 0%, #fce9e1 100%);
    border-radius: 4rpx;
    color: #f0250e;
  }
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #262626;
}

.num {
  display: flex;
  align-items: center;
  margin-top: 6rpx;
  height: 84rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #8c8c8c;

  .item {
    width: 50%;
    text-align: center;

    text {
      margin-left: 10rpx;
      color: #262626;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;

  width: 100%;
  background: #fff;
  overflow: hidden;

  .btn {
    display: flex;
    padding: 0 24rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex: 1;
      margin: 11rpx;
      height: 76rpx;
      background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
      border-radius: 32px;
      font-size: 26rpx;
      color: #fff;
      font-weight: bold;
    }

    .item1 {
      background: linear-gradient(90deg, #ffb11c 0%, #ffbf14 100%);
    }
  }
}

.m-content {
  border-radius: 20rpx;
}

.m-content-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx 24rpx;
  height: 120rpx;
  box-sizing: border-box;
  background: linear-gradient(90deg, #fe4638 0%, #fe6e2b 100%);
  border-radius: 20rpx;
  color: #fff;

  .rig {
    display: flex;
    align-items: center;
    font-size: 24rpx;

    .iconfont {
      position: relative;
      top: 2rpx;
      margin-right: 4rpx;
      font-size: 34rpx;
    }
  }

  .let {
    font-size: 30rpx;
    font-weight: bold;
    color: #fff;
  }
}

.m-content-bd {
  position: relative;
  margin-top: -24rpx;
  padding: 24rpx;
  background: linear-gradient(180deg, #fef4f4 0%, #ffffff 100%);
  border-radius: 20rpx;

  .line {
    margin-bottom: 30rpx;
    height: 2rpx;
    background: #f2f2f2;
  }

  .ts {
    padding: 10rpx 0 30rpx;

    image {
      display: block;
      width: 100%;
    }
  }
}
</style>
